<template>
  <div class="layui-layout layui-layout-admin">
    <!-- 头部区域 -->
    <Head></Head>
    <menuTree></menuTree>
    <!-- 页面标签 -->
    <Labels ref="labels"></Labels>
    <!-- 主体内容 -->
    <Body ref="body"></Body>
    <!-- 辅助元素，一般用于移动设备下遮罩 -->
    <div class="layadmin-body-shade" layadmin-event="shade"></div>
  </div>
</template>
<script>
import "../../../assets/js/manager/index";
import menuTree from "@/components/manager/index/children/menuTree";
import Body from "@/components/manager/index/children/Body";
import Head from "@/components/manager/index/children/Head";
import Labels from "@/components/manager/index/children/Labels";
import "../../../assets/js/manager/admin";
export default {
  name: "ManagerIndex",
  components: {
    menuTree,
    Body,
    Head,
    Labels,
    Body,
  },
  mounted: function () {
    var labels = this.$refs.labels;
    var body = this.$refs.body;
    layui.use("element", function () {
      var element = layui.element;
      element.tab({
        headerElem: "#LAY_app_tabsheader>li", //指定tab头元素项
        bodyElem: "#LAY_app_body>.layadmin-tabsbody-item", //指定tab主体元素项
      });
      element.on("tabDelete(layadmin-layout-tabs)", function (data) {
        var layid = $(this).parent().attr("lay-id");
        element.tabDelete("layadmin-layout-tabs", layid);
        body.deleteBody(layid);
        labels.deleteTabs(layid);
      });
    });
    $("body").on("click", "*[lay-href]", function (obj) {
      var isAdd = labels.loadTabs(this);
      if (isAdd) {
        body.loadBodys(this);
      }
      var layid = $(this).attr("lay-href");
      layui.use("element", function () {
        var element = layui.element;
        element.tabChange("layadmin-layout-tabs", layid);
      });
    });
  },
  methods: {},
};
</script>